<template>
	<div>
		<el-container style="height: 100vh;overflow: hidden;">
			<el-aside width="200px" style="overflow: hidden;">
				<span class="logo" @click="gohome">
					In有后台管理
				</span>
				<el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse">
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-document"></i>
							<span slot="title">订单</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click='orderDetail()'>订单列表</el-menu-item>
							<el-menu-item index="1-2" @click='orderOPeration()'>订单管理</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-s-shop"></i>
							<span slot="title">商品</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="2-1" @click='goodsDetail()'>商品列表</el-menu-item>
							<el-menu-item index="2-2" @click='goodsOperation()'>管理商品</el-menu-item>
							<el-menu-item index="2-3" @click='categories()'>商品分类</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-s-custom"></i>
							<span slot="title">用户</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="3-1" @click='userlist()'>用户列表</el-menu-item>
							<el-menu-item index="3-2" @click='adduser()'>添加用户</el-menu-item>
							<el-menu-item index="3-3" @click='usercao()'>用户操作</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown" >
							<el-dropdown-item @click.native="back()">退出</el-dropdown-item>
						</el-dropdown-menu>
						<span>{{admin}}</span>
					</el-dropdown>
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import * as api from '../api/User'
	export default {
		name: 'index',
		data() {
			return {
				admin: [],
				isCollapse: false,
				editableTabsValue: '2',
				editableTabs: [{
					title: 'Tab 1',
					name: '1',
					content: 'Tab 1 content'
				}, {
					title: 'Tab 2',
					name: '2',
					content: 'Tab 2 content'
				}],
				tabIndex: 2
			}
		},
		methods: {
			gohome(){
				this.$router.push('/home')
			},
			orderDetail() {
				this.$router.push('/orderDetail')
			},
			orderOPeration() {
				this.$router.push('/orderOPeration')
			},
			goodsOperation() {
				this.$router.push('/goodsOperation')
			},
			goodsDetail() {
				this.$router.push('/goodsDetail')
			},
			back() {
				this.$router.push('/login')
			},
			categories(){
				this.$router.push('/categories')
			},
			userlist(){
				this.$router.push('/userlist')
			},
			adduser(){
				this.$router.push('/adduser')
			},
			usercao(){
				this.$router.push('/usercao')
			}
		},
		mounted() {
			let token = localStorage.getItem('token')
			api.manager_info({}, token).then(res => {
				this.admin = res.data.userName
			})

			api.users({
				per: 10,
				page: 1,
				userName: 'admin001',
				nickName: '超级管理员',
			}, token).then(res => {
				
			})
		}
	}
</script>

<style scoped="">
	body {
		margin: 0 !important;
		padding: 0;
	}

	.el-header {
		background-color: #444f60;
		color: #eee;
		line-height: 60px;
	}
	.el-aside {
		color: #eee;
		background-color: #444f60;
	}
	.logo{
		display: block;
		width: 100%;
		height: 60px;
		background: #444f60;
		color: #eee;
		line-height: 60px;
		text-align: center;
	}
	.el-dropdown{
		color: #fff;
	}
</style>